<html>
<head>

<!-- For use in Facebook -->
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.11.custom.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui.override.css" />
<link rel="stylesheet" type="text/css" href="../css/multiColumn.css" />
<link rel="stylesheet" href="../css/menu_style.css" type="text/css" media="all" />
<script type="text/javascript" src="../js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="../js/jquery.quicksand.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../js/jquery.ezpz_tooltip.js"></script>

<script type="text/javascript"><!--

var isDragging = false;
var isClicking = false;

function updateCardClickBinding()
{
	$('.card').click(
		function()
		{
			var thisElement = $(this);
			if (thisElement.hasClass('ui-sortable-helper') || thisElement.hasClass('ui-sortable-placeholder'))
				return;
			if (isDragging || !isClicking)
				return;
						
			var cardImageBack = thisElement.find('.cardImg img').attr('src');
			var cardImageFront = cardImageBack
				.replace(' 3_b', ' 1_f')
				.replace(' 7_b', ' 5_f')
				.replace(' 11_b', ' 9_f')
				.replace(' 2_b', '_f')
				.replace(' 4_b', ' 3_f')
				.replace('_b', '_f');
			var dialog = $(''.concat(
				'<table>',
					'<tr>',
						'<td>',
							'<img src="', cardImageFront, '" width="275" height="375"/>',
						'</td>',
						'<td>',
							'<img src="', cardImageBack, '" width="275" height="375"/>',
						'</td>',
					'</tr>',
				'</table>'
			));
			$.get(cardImageFront, function () {
				dialog.dialog({
					modal:true,
					resizable:false,
					draggable:false,
					width: 588
				});
			});
		}
	).mousedown(
		function() { isClicking = true; }
	).mousemove(
		function() { isClicking = false; }
	);
}

function loadCards(options)
{
	//Update user points
	$.post("../ajax/getUserPoints.php", "", function(data){	document.getElementById('userpoints').innerHTML = data; });
	
	if (options === undefined || options === null)
		options = {};
	options.from = "my collection";
	
	//var link = "../ajax/getMyCardList.php?";
	var link = "../ajax/getCardList.php?";

	//link = link + "cardname=";	
	//link = link + form.cardname.value;
	if (form.cardname.value && form.cardname.value != "Card name")
		options.name_filter=form.cardname.value;

	var rad = document.form.cardtype;

	for(i=0;i<rad.length;i++)
	{
		if(rad[i].checked ==true)
		{
			//link = link + "&cardtype=" + rad[i].value;
			options.type_filter=rad[i].value;
		}
	}

    
	var oldCards = $('.cards');
	$.post(
		link,
		options,
		function(data)
		{
			var newCards = $(data);
			newCards.attr('hidden', 'true');
			oldCards.quicksand
			(
				newCards.children('.card'),
				{
					duration: 700,
					attribute: 'id',
					easing: 'easeInOutQuad'
				},
				function()
				{
					//$(".cardImg").ezpz_tooltip({contentId:"example-content-1"});
					//oldCards.selectable();
					//oldCards.sortable({
					//	delay: 1000
					//});
					/*oldCards.selectable({
						stop: function() {
							var result = $( "#select-result" ).empty();
								$( ".ui-selected.card", this ).each(function( ) {
							var index = $( this ).attr('id');
								result.append( " #" + ( index) );
							
							sIDs[cnt] = index;
							cnt = cnt +1;
							document.passing.formvar.value = sIDs[0];
							});
									
							cnt = 0;
						}
					});*/
					oldCards.sortable({
						start: function() { isDragging = true; },
						stop: function() { isDragging = false; }
					});
					updateCardClickBinding();
				}
			);
		},
		'html'
	);
}

// Not placed within a function technically, so will run when webpage loads.
$(function() {	
	$('.search').click(function(e) {
		loadCards();
		e.preventDefault();
	});
	loadCards();
});

function changeEnterKey(e)
{
	var key;
	if(window.event)
		key = window.devent.keyCode;
	else
		key = e.which;
	if(key==13)
	{
		loadCards();
		return false;
	}
	else
		return true;
		
}

function keyPressed(e) {
    var keycode;
    if (window.event) {
        keycode = window.event.keyCode;
    }
    else if (e) {
        keycode = e.which;
    }
    else {
        return (false);
    }
	if(keycode == 13)
		loadCards();
    return (keycode != 13);
}

--></script>
</head>
<body>


<div id="header"> 
	<img src="../images/newbannertest.png"></img>
</div>
<div class="colmask leftmenu"> 
    <div class="colright"> 
        <div class="col1wrap"> 
				<div class="col1">
				<div class="cardList">
					<ul class="cards">
					</ul>
				</div>
			</div>
		</div>

		<div class="col2">
			<form name="form">
			<input
				type="text"
				name="cardname"
				onfocus="$(this).val('') /*.select()*/"
				onkeypress="return keyPressed(event)"
				value="<?php if($_GET["cardname"])echo $_GET["cardname"]; else echo "Card name"; ?>"
			/> 
			<br /> 
			<input type="radio" name="cardtype" value="0" checked>All Types
			<br />
			<input type="radio" name="cardtype" value="1">Race
			<br />
			<input type="radio" name="cardtype" value="2">Aspect
			<br />
			<input type="radio" name="cardtype" value="3">Power
			<br />
			<input type="radio" name="cardtype" value="10">Minion
			<br />
			<input type="radio" name="cardtype" value="20">Bane
			<br />
			<p> <a class="search" href="#dummy"> Search </a> </p>
			</form>
			Your Points: <span id="userpoints">0</span>
		</div>
	</div>
	
	<div>
		<div id="example-content-1">Tooltip content</div>
		
		
		</div>
	</div> 
	
	<div id="dock">
		<ul id='menu'>
			<li class="button"><a href='../home.php/' >Home</a></li>
			<li class="button"><a class='current' href='../myCollection.php/'  >My Collection</a></li>
			<li class="button"><a href='../store.php/'  >Store</a></li>
			<li class="button"><a href='../tradeHome.php/'  >Trading</a></li>
			<li class="button"><a href='http://www.untoldthegame.com/forum'  target="_blank">Forums</a></li>
			<li class="button"><a href='http://'  >Character Builder</a></li>
			<li class="button"><a href='../help/I3_toc.php/'  target="_blank">Help</a></li>
		</ul>
	</div><!-- End of Nav Div -->
</div>

</body>
</html>
